<template>
  <div class="home">
    <a-layout :style="contentBackground">
      <a-layout-header>
        <a-row type="flex" justify="center">
          <a-col>
            <Logo style="margin: 7px 7px" />
          </a-col>
          <a-col>
            <h1>
              北京航空航天大学麦克风借还管理系统
            </h1>
          </a-col>
        </a-row>
      </a-layout-header>
      <a-layout-content :style="layoutFill">
        <Login />
      </a-layout-content>
      <a-layout-footer>CopyLeft 2020 Created with ❤</a-layout-footer>
    </a-layout>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Login from "@/components/Login.vue";
import Logo from "@/components/Logo.vue";
import imgUrl from "@/assets/bg.webp";

export default defineComponent({
  components: {
    Login: Login,
    Logo: Logo
  },
  setup() {
    const contentBackground = {
      height: "100%",
      textAlign: "center"
    };
    const layoutFill = {
      height: "100%",
      "background-image": `url('${imgUrl}')`,
      "background-size": "cover"
    };
    return {
      layoutFill,
      contentBackground
    };
  }
});
</script>
<style lang="less" scoped>
Logo {
  margin: 7px 10px;
  height: 50px;
}

h1 {
  color: #ffffff;
}

.home {
  height: 100%;
}

a-layout {
  height: 100%;
}

a-col {
  min-width: 300px;
}

Login {
  margin-top: 20px;
}
</style>
